<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝网</title>
	<style>
		.wrapper{
			margin: 0 18%;
			height: 300px;
		}

		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
		.left{
			width: 258px;
			height: 298px;
			padding-left: 20px;
			/*box-sizing: border-box;*/
		}
		.left>div>p:first-child{
			color: blue;
		}
		.left>div>p:last-child{
			color: #aaa;
		}
		.left>div>p:nth-child(2){
			color: gray;
		}
		.right{
			width: 530px;
			/*position: relative;*/
		}
		.item{
			width: 260px;
			height: 148px;
			position: relative;
		}

		.right img{
			width: 90px;
			position: absolute;
			right: 0;
			bottom: 0;
		}
		.left img{
			width: 150px;
		}
		.boright{
			border: 1px solid #ccc;
		}
		.borbot{
			border: 1px solid #ccc;
		}
		div>.left{
			border-top: none;
			border-left: none;
			border-bottom: none;
		}
		.right>.item{
			border-right: none;
			border-top: none;
		}
		.i5{
			border-bottom: none;
		}
	</style>
</head>
<body>

	<div class="wrapper">
		<div class="left fl boright borbot">
			<div>
				<p>欢心</p>
				<p>件件必抢</p>
				<p>牛货季节</p>
			</div>
			<img src="01.jpg" alt="">
		</div>

		<div class="right fl">
			<div class="item fl boright borbot">
				<div>
					<p>欢心</p>
					<p>件件必抢</p>
					<p>牛货季节</p>
				</div>
				<img src="02.jpg" alt="">
			</div>

			<div class="item fl boright borbot">
				<div>
					<p>欢心</p>
					<p>件件必抢</p>
					<p>牛货季节</p>
				</div>
				<img src="03.jpg" alt="">
			</div>

			<div class="item fl boright borbot i5">
				<div>
					<p>欢心</p>
					<p>件件必抢</p>
					<p>牛货季节</p>
				</div>
				<img src="04.jpg" alt="">
			</div>

			<div class="item fl boright borbot i5">
				<div>
					<p></p>
					<p>欢心</p>
					<p>件件必抢</p>
					<p>牛货季节</p>
				</div>
				<img src="05.jpg" alt="">
			</div>
	</div>
</body>
</html>